<template>
  <div>
    <el-table :data="goods" style="width: 100%" border :show-header="tableHead">
      <el-table-column
        width="50"
        header-align="center"
        label="名称"
        prop="name"
      >
      </el-table-column>
      <el-table-column width="75" header-align="center" label="用途" prop="use">
      </el-table-column>
      <el-table-column
        width="75"
        header-align="center"
        label="种类"
        prop="kind"
      >
      </el-table-column>

      <!-- 进港 -->
      <el-table-column
        style="width: 5%"
        header-align="center"
        label="进港（卸船）"
      >
        <el-table-column style="width: 5%" header-align="center" label="本月">
          <template #default="{ row }">
            <el-input
              type="number"
              v-model="row.enterHarbourMonth"
              style="width: 100%"
              @input="
                calculateTotal(
                  row,
                  'enterHarbourMonthGrowth',
                  'enterHarbourMonth'
                )
              "
            />
          </template>
        </el-table-column>
        <el-table-column style="width: 5%" header-align="center" label="年累计">
          <template #default="{ row }">
            <el-input
              type="number"
              v-model="row.enterHarbourYear"
              style="width: 100%"
              @input="
                calculateTotal(
                  row,
                  'enterHarbourYearGrowth',
                  'enterHarbourYear'
                )
              "
            />
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column style="width: 5%" header-align="center" label="去年同期">
        <el-table-column style="width: 5%" header-align="center" label="本月">
          <template #default="{ row }">
            <el-input
              type="number"
              v-model="row.enterHarbourMonthLastYear"
              style="width: 100%"
              @input="
                calculateTotal(
                  row,
                  'enterHarbourMonthGrowth',
                  'enterHarbourMonthLastYear'
                )
              "
            />
          </template>
        </el-table-column>
        <el-table-column style="width: 5%" header-align="center" label="年累计">
          <template #default="{ row }">
            <el-input
              type="number"
              v-model="row.enterHarbourYearLastYear"
              style="width: 100%"
              @input="
                calculateTotal(
                  row,
                  'enterHarbourYearGrowth',
                  'enterHarbourYearLastYear'
                )
              "
            />
          </template>
        </el-table-column>
      </el-table-column>

      <!-- 同比增长 -->
      <el-table-column
        style="width: 5%"
        header-align="center"
        label="同比增长%"
      >
        <el-table-column
          style="width: 5%"
          header-align="center"
          label="本月"
          prop="enterHarbourMonthGrowth"
        ></el-table-column>
        <el-table-column
          style="width: 5%"
          header-align="center"
          label="年累计"
          prop="enterHarbourYearGrowth"
        ></el-table-column>
      </el-table-column>

      <!-- 出港 -->
      <el-table-column
        style="width: 5%"
        header-align="center"
        label="出港（卸船）"
      >
        <el-table-column style="width: 5%" header-align="center" label="本月">
          <template #default="{ row }">
            <el-input
              type="number"
              v-model="row.leaveHarbourMonth"
              style="width: 100%"
              @input="
                calculateTotal(
                  row,
                  'leaveHarbourMonthGrowth',
                  'leaveHarbourMonth'
                )
              "
            />
          </template>
        </el-table-column>
        <el-table-column style="width: 5%" header-align="center" label="年累计">
          <template #default="{ row }">
            <el-input
              type="number"
              v-model="row.leaveHarbourYear"
              style="width: 100%"
              @input="
                calculateTotal(
                  row,
                  'leaveHarbourYearGrowth',
                  'leaveHarbourYear'
                )
              "
            />
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column style="width: 5%" header-align="center" label="去年同期">
        <el-table-column style="width: 5%" header-align="center" label="本月">
          <template #default="{ row }">
            <el-input
              type="number"
              v-model="row.leaveHarbourMonthLastYear"
              style="width: 100%"
              @input="
                calculateTotal(
                  row,
                  'leaveHarbourMonthGrowth',
                  'leaveHarbourMonthLastYear'
                )
              "
            />
          </template>
        </el-table-column>
        <el-table-column style="width: 5%" header-align="center" label="年累计">
          <template #default="{ row }">
            <el-input
              type="number"
              v-model="row.leaveHarbourYearLastYear"
              style="width: 100%"
              @input="
                calculateTotal(
                  row,
                  'leaveHarbourYearGrowth',
                  'leaveHarbourYearLastYear'
                )
              "
            />
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        label="同比增长%"
      >
        <el-table-column
          style="width: 5%"
          header-align="center"
          label="本月"
          prop="leaveHarbourMonthGrowth"
        ></el-table-column>
        <el-table-column
          style="width: 5%"
          header-align="center"
          label="年累计"
          prop="leaveHarbourYearGrowth"
        ></el-table-column>
      </el-table-column>

      <el-table-column style="width: 5%" header-align="center" label="堆场库存">
        <template #default="{ row }">
          <el-input
            type="number"
            v-model="row.stock"
            style="width: 100%"
            @input="calculateTotal(row, '', 'stock')"
          />
        </template>
      </el-table-column>

      <el-table-column
        style="width: 10% !important"
        header-align="center"
        label="备注"
      >
        <template #default="{ row }">
          <el-input
            type="textarea"
            rows="2"
            v-model="row.remark"
            style="width: 100%"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-table
      :data="totalGoods"
      style="width: 100%"
      border
      :show-header="false"
    >
      <el-table-column
        width="200"
        header-align="center"
        prop="name"
      ></el-table-column>

      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="enterHarbourMonth"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="enterHarbourYear"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="enterHarbourMonthLastYear"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="enterHarbourYearLastYear"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="enterHarbourMonthGrowth"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="enterHarbourYearGrowth"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="leaveHarbourMonth"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="leaveHarbourYear"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="leaveHarbourMonthLastYear"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="leaveHarbourYearLastYear"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="leaveHarbourMonthGrowth"
      >
      </el-table-column>
      <el-table-column
        style="width: 5%"
        header-align="center"
        prop="leaveHarbourYearGrowth"
      >
      </el-table-column>
      <el-table-column style="width: 5%" header-align="center" prop="stock">
      </el-table-column>
      <el-table-column style="width: 10%" header-align="center" prop="remark">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Array
    },
    totalGoods: {
      type: Array
    },
    tableHead: {
      type: Boolean,
      default: true
    }
  },
  created () {
    console.log(this.goods)
    console.log(this.totalGoods)
  },
  methods: {
    // 在触发这个事件时，修改累计数量和同比增长中的值，这样既可以展示变化值，也可以将这个变化值保存起来传给后端
    calculateTotal (row, str, totalFlag) {
      // 计算进港本月同比增长
      if (str === 'enterHarbourMonthGrowth') {
        const n1 = Number(row.enterHarbourMonth)
        const n2 = Number(row.enterHarbourMonthLastYear)
        row[str] = (((n1 - n2) / n2) * 100).toFixed(2)
      }

      // 计算进港年累计同比增长
      if (str === 'enterHarbourYearGrowth') {
        const n1 = Number(row.enterHarbourYear)
        const n2 = Number(row.enterHarbourYearLastYear)
        row[str] = (((n1 - n2) / n2) * 100).toFixed(2)
      }

      // 计算出港年累计同比增长
      if (str === 'leaveHarbourMonthGrowth') {
        const n1 = Number(row.leaveHarbourMonth)
        const n2 = Number(row.leaveHarbourMonthLastYear)
        row[str] = (((n1 - n2) / n2) * 100).toFixed(2)
      }

      // 计算出港年累计同比增长
      if (str === 'leaveHarbourYearGrowth') {
        const n1 = Number(row.leaveHarbourYear)
        const n2 = Number(row.leaveHarbourYearLastYear)
        row[str] = (((n1 - n2) / n2) * 100).toFixed(2)
      }

      // 计算累计值
      let res = 0
      this.goods.forEach((item) => {
        res += Number(item[totalFlag])
      })
      this.totalGoods[0][totalFlag] = res
      if (
        totalFlag === 'enterHarbourMonth' ||
        totalFlag === 'enterHarbourMonthLastYear'
      ) {
        const n1 = Number(this.totalGoods[0].enterHarbourMonth)
        const n2 = Number(this.totalGoods[0].enterHarbourMonthLastYear)
        console.log(n1, n2)
        this.totalGoods[0].enterHarbourMonthGrowth = (
          ((n1 - n2) / n2) *
          100
        ).toFixed(2)
      } else if (
        totalFlag === 'enterHarbourYear' ||
        totalFlag === 'enterHarbourYearLastYear'
      ) {
        const n1 = Number(this.totalGoods[0].enterHarbourYear)
        const n2 = Number(this.totalGoods[0].enterHarbourYearLastYear)
        console.log(n1, n2)
        this.totalGoods[0].enterHarbourYearGrowth = (
          ((n1 - n2) / n2) *
          100
        ).toFixed(2)
      } else if (
        totalFlag === 'leaveHarbourMonth' ||
        totalFlag === 'leaveHarbourMonthLastYear'
      ) {
        const n1 = Number(this.totalGoods[0].leaveHarbourMonth)
        const n2 = Number(this.totalGoods[0].leaveHarbourMonthLastYear)
        console.log(n1, n2)
        this.totalGoods[0].leaveHarbourMonthGrowth = (
          ((n1 - n2) / n2) *
          100
        ).toFixed(2)
      } else if (
        totalFlag === 'leaveHarbourYear' ||
        totalFlag === 'leaveHarbourYearLastYear'
      ) {
        const n1 = Number(this.totalGoods[0].leaveHarbourYear)
        const n2 = Number(this.totalGoods[0].leaveHarbourYearLastYear)
        console.log(n1, n2)
        this.totalGoods[0].leaveHarbourYearGrowth = (
          ((n1 - n2) / n2) *
          100
        ).toFixed(2)
      }

      // console.log(totalFlag);
      // console.log(this.totalGoods);
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-textarea__inner {
  border: none;
  // resize: none;
  padding: 0;
}
::v-deep .el-input__inner {
  border: none;
  padding: 0;
}

::v-deep .el-table__cell {
  padding: 0;
}

::v-deep .cell {
  padding-left: 0;
  padding-right: 0;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 0;
}
</style>
